<!--
 * hi-movable-button - 可拖动按钮
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <movable-area class="hi-movable-button" :scale-area="scaleArea" :class="_classes" :style="_styles">
        <!-- #ifndef MP -->
        <movable-view
            class="hi-movable-button__movable-view"
            :direction="direction"
            :inertia="inertia"
            :out-of-bounds="outOfBounds"
            :damping="damping"
            :friction="friction"
            :disabled="disabled"
            :scale="scale"
            :scale-min="scaleMin"
            :scale-max="scaleMax"
            :scale-value="scaleValue"
            :animation="animation"
            :hover-class="hover"
            @tap="_emits('click')"
            @change="_emits('change')"
            @scale="_emits('scale')"
        >
            <slot>
                <hi-icon class="hi-movable-button__icon" :name="icon"></hi-icon>
                <text class="hi-movable-button__text" v-if="text">{{ text }}</text>
            </slot>
            <slot name="other"></slot>
        </movable-view>
        <!-- #endif -->

        <!-- 小程序的 direction 属性使用 props 中的值绑定不生效，只能一个一个的判断了，头疼~~~ -->
        <!-- #ifdef MP -->
        <movable-view
            class="hi-movable-button__movable-view"
            direction="all"
            :inertia="inertia"
            :out-of-bounds="outOfBounds"
            :damping="damping"
            :friction="friction"
            :disabled="disabled"
            :scale="scale"
            :scale-min="scaleMin"
            :scale-max="scaleMax"
            :scale-value="scaleValue"
            :animation="animation"
            :hover-class="hover"
            @tap="_emits('click')"
            @change="_emits('change')"
            @scale="_emits('scale')"
            v-if="direction === 'all'"
        >
            <slot>
                <hi-icon class="hi-movable-button__icon" :name="icon"></hi-icon>
                <text class="hi-movable-button__text" v-if="text">{{ text }}</text>
            </slot>
            <slot name="other"></slot>
        </movable-view>
        <movable-view
            class="hi-movable-button__movable-view"
            direction="vertical"
            :inertia="inertia"
            :out-of-bounds="outOfBounds"
            :damping="damping"
            :friction="friction"
            :disabled="disabled"
            :scale="scale"
            :scale-min="scaleMin"
            :scale-max="scaleMax"
            :scale-value="scaleValue"
            :animation="animation"
            :hover-class="hover"
            @tap="_emits('click')"
            @change="_emits('change')"
            @scale="_emits('scale')"
            v-else-if="direction === 'vertical'"
        >
            <slot>
                <hi-icon class="hi-movable-button__icon" :name="icon"></hi-icon>
                <text class="hi-movable-button__text" v-if="text">{{ text }}</text>
            </slot>
            <slot name="other"></slot>
        </movable-view>
        <movable-view
            class="hi-movable-button__movable-view"
            direction="horizontal"
            :inertia="inertia"
            :out-of-bounds="outOfBounds"
            :damping="damping"
            :friction="friction"
            :disabled="disabled"
            :scale="scale"
            :scale-min="scaleMin"
            :scale-max="scaleMax"
            :scale-value="scaleValue"
            :animation="animation"
            :hover-class="hover"
            @tap="_emits('click')"
            @change="_emits('change')"
            @scale="_emits('scale')"
            v-else-if="direction === 'horizontal'"
        >
            <slot>
                <hi-icon class="hi-movable-button__icon" :name="icon"></hi-icon>
                <text class="hi-movable-button__text" v-if="text">{{ text }}</text>
            </slot>
            <slot name="other"></slot>
        </movable-view>
        <movable-view
            class="hi-movable-button__movable-view"
            direction="none"
            :inertia="inertia"
            :out-of-bounds="outOfBounds"
            :damping="damping"
            :friction="friction"
            :disabled="disabled"
            :scale="scale"
            :scale-min="scaleMin"
            :scale-max="scaleMax"
            :scale-value="scaleValue"
            :animation="animation"
            :hover-class="hover"
            @tap="_emits('click')"
            @change="_emits('change')"
            @scale="_emits('scale')"
            v-else-if="direction === 'none'"
        >
            <slot>
                <hi-icon class="hi-movable-button__icon" :name="icon"></hi-icon>
                <text class="hi-movable-button__text" v-if="text">{{ text }}</text>
            </slot>
            <slot name="other"></slot>
        </movable-view>
        <!-- #endif -->
    </movable-area>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["click", "change", "scale"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 禁用
        if (_props.disabled) classes.push("hi-movable-button--disabled hi-disabled");

        // 初始位置
        if (_props.position) classes.push("hi-movable-button--" + _props.position);

        // 边框
        if (_props.border) classes.push("hi-movable-button--border");

        // 主题
        if (_props.theme) classes.push(`hi-movable-button--theme hi-movable-button--theme-${_props.theme}`);

        // 镂空
        if (_props.plain) classes.push("hi-movable-button--plain");

        // 浅化背景
        if (_props.tint) classes.push("hi-movable-button--tint");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 背景
        if (_props.bg) styles.push(`--hi-movable-button-background: ${_props.bg}`);

        // 颜色
        if (_props.color) styles.push(`--hi-movable-button-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-movable-button-font-size: ${_props.fontSize}`);

        // 圆角
        if (_props.radius) styles.push(`--hi-movable-button-border-radius: ${_props.radius}`);

        // 宽高
        if (_props.width) styles.push(`--hi-movable-button-width: ${_props.width}`);
        if (_props.height) styles.push(`--hi-movable-button-height: ${_props.height}`);

        // 边框
        if (_props.borderWidth) styles.push(`--hi-movable-button-border-width: ${_props.borderWidth}`);
        if (_props.borderColor) styles.push(`--hi-movable-button-border-color: ${_props.borderColor}`);

        // 图标大小、颜色
        if (_props.iconSize) styles.push(`--hi-movable-button-icon-font-size: ${_props.iconSize}`);
        if (_props.iconColor) styles.push(`--hi-movable-button-icon-color: ${_props.iconColor}`);

        // 阴影
        if (_props.shadow) styles.push(`--hi-movable-button-box-shadow: ${_props.shadow}`);

        // 位置
        if (_props.top) styles.push(`--hi-movable-button-top: ${_props.top}`);
        if (_props.left) styles.push(`--hi-movable-button-left: ${_props.left}`);
        if (_props.right) styles.push(`--hi-movable-button-right: ${_props.right}`);
        if (_props.bottom) styles.push(`--hi-movable-button-bottom: ${_props.bottom}`);

        // 主题
        if (_props.theme) styles.push(`--hi-movable-button-theme: var(--hi-theme-${_props.theme})`);

        // 浅化透明度
        if (_props.tintOpacity) styles.push(`--hi-movable-button-background-opacity: ${_props.tintOpacity}`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-movable-button {
        width: var(--hi-movable-button-container-width, 100%);
        height: var(--hi-movable-button-container-height, 100%);
        top: var(--hi-movable-button-container-top, 0);
        left: var(--hi-movable-button-container-left, 0);
        z-index: var(--hi-movable-button-container-z-index, var(--hi-index-default));
        background: var(--hi-movable-button-container-background, transparent);
        position: var(--hi-movable-button-container-position, fixed);
        pointer-events: var(--hi-movable-button-container-pointer-events, none);

        // #ifdef H5
        height: calc(100% - var(--window-top) - var(--window-bottom));
        top: var(--window-top);
        // #endif

        &__movable-view {
            pointer-events: var(--hi-movable-button-pointer-events, all);
            width: var(--hi-movable-button-width, 45px);
            height: var(--hi-movable-button-height, 45px);
            left: var(--hi-movable-button-left, auto);
            right: var(--hi-movable-button-right, auto);
            top: var(--hi-movable-button-top, auto);
            bottom: var(--hi-movable-button-bottom, auto);
            background: var(--hi-movable-button-background, var(--hi-background-default));
            border-radius: var(--hi-movable-button-border-radius, 50%);
            display: var(--hi-movable-button-display, flex);
            flex-direction: var(--hi-movable-button-flex-direction, column);
            align-items: var(--hi-movable-button-align-items, center);
            justify-content: var(--hi-movable-button-justify-content, center);
            line-height: var(--hi-movable-button-line-height, 1.25);
            color: var(--hi-movable-button-color, inherit);
            font-size: var(--hi-movable-button-font-size, 0.7em);
            box-shadow: var(--hi-movable-button-box-shadow, none);
            border: var(--hi-movable-button-border-width, 0) var(--hi-movable-button-border-style, solid) var(--hi-movable-button-border-color, currentColor);
            z-index: var(--hi-movable-button-z-index, var(--hi-index-default));
            margin: var(--hi-movable-button-margin, 0);
        }

        &__icon {
            font-size: var(--hi-movable-button-icon-font-size, 24px);
            color: var(--hi-movable-button-icon-color, inherit);
        }

        &--left-top {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 10px);
                top: var(--hi-movable-button-top, 10px);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, auto);
            }
        }

        &--left-center {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 10px);
                top: var(--hi-movable-button-top, 50%);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, auto);
                margin: var(--hi-movable-button-margin, calc(-1 * var(--hi-movable-button-height)) 0 0 0);
            }
        }

        &--left-bottom {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 10px);
                top: var(--hi-movable-button-top, auto);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, 10px);
            }
        }

        &--right-top {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, auto);
                top: var(--hi-movable-button-top, 10px);
                right: var(--hi-movable-button-right, 10px);
                bottom: var(--hi-movable-button-bottom, auto);
            }
        }

        &--right-center {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, auto);
                top: var(--hi-movable-button-top, 50%);
                right: var(--hi-movable-button-right, 10px);
                bottom: var(--hi-movable-button-bottom, auto);
                margin: var(--hi-movable-button-margin, calc(-1 * var(--hi-movable-button-height)) 0 0 0);
            }
        }

        &--right-bottom {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, auto);
                top: var(--hi-movable-button-top, auto);
                right: var(--hi-movable-button-right, 10px);
                bottom: var(--hi-movable-button-bottom, 10px);
            }
        }

        &--center-top {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 50%);
                top: var(--hi-movable-button-top, 10px);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, auto);
                margin: var(--hi-movable-button-margin, 0 0 0 calc(-1 * var(--hi-movable-button-width)));
            }
        }

        &--center-center {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 50%);
                top: var(--hi-movable-button-top, 50%);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, auto);
                margin: var(--hi-movable-button-margin, calc(-1 * var(--hi-movable-button-height)) 0 0 calc(-1 * var(--hi-movable-button-width)));
            }
        }

        &--center-bottom {
            .hi-movable-button__movable-view {
                left: var(--hi-movable-button-left, 50%);
                top: var(--hi-movable-button-top, auto);
                right: var(--hi-movable-button-right, auto);
                bottom: var(--hi-movable-button-bottom, 10px);
                margin: var(--hi-movable-button-margin, 0 0 0 calc(-1 * var(--hi-movable-button-width)));
            }
        }

        // 主题
        &--theme {
            .hi-movable-button__movable-view {
                background: var(--hi-movable-button-background, var(--hi-movable-button-theme, var(--hi-background-default)));
                color: var(--hi-movable-button-color, #ffffff);
            }
        }

        // 镂空
        &--plain {
            .hi-movable-button__movable-view {
                background: var(--hi-movable-button-background, transparent);
                color: var(--hi-movable-button-color, var(--hi-movable-button-theme, inherit));
                border-width: var(--hi-movable-button-border-width, 1px);
                border-color: var(--hi-movable-button-border-color, var(--hi-movable-button-theme, currentColor));
            }
        }

        // 浅化
        &--tint {
            .hi-movable-button__movable-view {
                background: transparent;
                color: var(--hi-movable-button-color, var(--hi-movable-button-theme, inherit));

                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    z-index: 0;
                    background: var(--hi-movable-button-background, var(--hi-movable-button-theme, var(--hi-background-default)));
                    opacity: var(--hi-movable-button-background-opacity, 0.2);
                    border-radius: inherit;
                }
            }
        }

        // 边框
        &--border {
            .hi-movable-button__movable-view {
                border-width: var(--hi-movable-button-border-width, 1px);
                border-color: var(--hi-movable-button-border-color, var(--hi-movable-button-theme, currentColor));
            }
        }
    }
</style>
